<!-- 话务量 -->
<template>
  <div class='telephone-traffic'>
    <dv-border-box7 :color="['rgba(156,234,245,0.1)', '#81effa']" class="left anime">
      <span class='title'>呼入量</span>
      <dv-decoration2 :dur="2" style="width:100%;height:5px;"/>
      <div class='count'>
        <dv-digital-flop :config="callInConfig" style="width:100%;height:120px;"/>
      </div>
    </dv-border-box7>
    <dv-border-box7 :color="['rgba(156,234,245,0.1)', '#81effa']" class="right anime">
      <span class='title'>接通量</span>
      <dv-decoration2 :dur="2" style="width:100%;height:5px;"/>
      <div class="count">
        <dv-digital-flop :config="callOutConfig" style="width:100%;height:120px;"/>
      </div>
    </dv-border-box7>
  </div>
</template>
<script setup>
import { Decoration2 as DvDecoration2, DigitalFlop as DvDigitalFlop,  BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3';
import {nextTick, onMounted, reactive, watch} from 'vue';
import { gsap } from 'gsap'
const props = defineProps(['telephoneVolume'])
const callInConfig = reactive({
	number: [0],
	content: '{nt}',
	textAlign: 'left',
	style: {
		fontSize: 66,
		fill: '#ffffff'
	}
})
const callOutConfig = reactive({
	number: [0],
	content: '{nt}',
	textAlign: 'left',
	style: {
		fontSize: 66,
		fill: '#ffffff'
	}
})
watch(() => props.telephoneVolume, (newValue) => {
  nextTick(() => {
    callInConfig.number[0] = newValue.callin
    callOutConfig.number[0] = newValue.connectnum
    anime()
  })
}, {deep: true})
onMounted(() => {
 setTimeout(() => {
   anime()
 }, 200)
})
const anime = () => {
  gsap.set(".anime", { height: "0%", opacity: 0 }); // 设置起始状态
  gsap.to('.anime', {
    height: "80%",
    duration: 1, // 动画持续时间（秒）
    scaleY: 1, // 目标缩放比例
    opacity: 1, // 如果有淡入效果
    delay: 0, // 延迟开始（秒）
  })
}
</script>
<style lang='less' scoped>
.telephone-traffic {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .left, .right {
    opacity: 1; /* 可选：如果想要淡入效果 */
    transform-origin: 50% 50%; /* 从元素的中心进行缩放 */
    transform: scaleY(0); /* 初始状态为压缩 */
    width: 45%;
    height: 80%;
    overflow: hidden;
	  padding: 30px;
	  box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 28px;
      color: #ffffff;
      width: 100%;
      height: 60px;
      // margin: 0 0 20px 0;
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
    }
    .title::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 36px;
      background-color: #109AFC;
      margin-right: 12px;
    }
    .count {
      width: 100%;
      height: 80px;
    }
  }
}
</style>
